<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="../js/vue.js"></script>
		<title>Login</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				box-sizing: border-box;
				text-decoration: none;
			}
			body{
				width: 100%;
				
			}
			.clearfix:after{
				content: '';
				display: block;
				clear: both;
			}
			.appBox{
				margin-top: 100px;
				background: linear-gradient(-45deg,#4cc9d8,#D94B01) no-repeat;
			}
			#app{
				width: 360px;
				margin: 0 auto;
				padding: 60px 0;
			}
			.labTex{
				font-size: 20px;
				font-weight: bold;
			}
			.lis{
				height: 60px;
				position: relative;
			}
			.inp{
				width: 360px;
				height: 40px;
				padding-left: 5px;
				vertical-align: top;
				border: 2px solid #BBBBBB;
				border-radius: 5px;
			}
			.inp:hover{
				border: 2px solid #666666;
			}
			.red{
				color: red;
				font-size: 14px;
			}
			.submit{
				cursor: pointer;
				width: 360px;
				height: 45px;
				margin: 0 auto;
				background: #0074D9;
				border-radius: 5px;
			}
			.btn{
				display: block;
				text-align: center;
				line-height: 45px;
				font-size: 22px;
				font-weight: bold;
				color: #fff;
			}
			.submit:hover{
				background: #0082E6;
			}
			.submit:hover .btn{
				color: #DFE6EC;
			}
			.lis i{
				width: 20px;
				height: 20px;
				background: url(../img/yes.png) no-repeat;
				background-size: 100%;
				position: absolute;
				right: 5px;
				top: 12px;
				display: none;
			}
			.lis .showIcn{
				display: block;
			}
			.lis .hideIcn{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="appBox">
			<div id="app" v-cloak>
				<div class="lis userName">
					<!--<label class="labTex">用户名:　</label>-->
					<input class="inp int_un" v-model="userInt" v-on:blur="Onblur_name" placeholder="请输入用户名"/>
					<i :class="isActive_name ? 'showIcn' : 'hideIcn'"></i>
					<p class="red" v-show="empty">用户名不能为空</p>
			        <p class="red" v-show="nameCons">由6-15位数字、英文字母或下划线和中文组成的字符串</p>
				</div>
				<div class="lis password">
					<!--<label class="labTex">密　　码:</label>-->
					<input class="inp int_psw" type="password" v-model="pasInt" v-on:blur="Onblur_pas" placeholder="请输入密码"/>
					<i :class="isActive_pas ? 'showIcn' : 'hideIcn'"></i>
			        <p class="red" v-show="pasNum">仅限于6-15位数字</p>
				</div>
				<div class="lis passwords">
					<!--<label class="labTex">确认密码:</label>-->
					<input class="inp int_psws" type="password" v-model="passInt" v-on:blur="Onblur_pass" placeholder="请确认密码"/>
					<i :class="isActive_pass ? 'showIcn' : 'hideIcn'"></i>
			        <p class="red" v-show="passNum">确认密码和密码不一致</p>
				</div>
				<div class="submit">
					<a :href="isUrl ? '简易留言.html' : 'javascript:;'" v-on:click="onSubmit()" class="btn">提　交</a>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
		        el: '#app',
		        data: {
		        	userInt: '',
		        	pasInt: '',
		        	passInt: '',
		        	emptyText: '用户名不能为空',
					empty: false,
		        	nameCons: false,
		        	pasNum: false,
		        	passNum: false,
		        	isActive_name: false,
		        	isActive_pas: false,
		        	isActive_pass: false,
		        	isUrl: false
		        },
		        methods: {
					Onblur_name: function (event) {
						var nameVal = this.userInt;//用户名
						if(nameVal){
							if(/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(nameVal)){//输入用户名符合规范
								this.empty = false;
								this.nameCons = false;
								this.isActive_name = true;
							}else{//输入用户名不符合规范
								this.isActive_name = false;
								this.empty = false;
								this.nameCons = true;
							}
						}else{//用户名为空
							this.isActive_name = false;
							this.nameCons = false;
							this.empty = true;
						}
					},
					Onblur_pas: function (event) {
						var pasVal = this.pasInt;//密码值
						if(pasVal && /^\d{6,15}$/.test(pasVal)){//输入密码符合规范
							this.pasNum = false;
							this.isActive_pas = true;
						}else{//密码为空/密码不符合要求
							this.isActive_pas = false;
							this.pasNum = true;
						}
					},
					Onblur_pass: function (event) {
						var pasVal = this.pasInt;//输入的密码
						var passVal = this.passInt;//确认的密码
						if(passVal && passVal == pasVal){//输入密码和原输入密码一致
							this.passNum = false;
							this.isActive_pass = true;
						}else{//确认密码和原输入密码不一致
							this.isActive_pass = false;
							this.passNum = true;
						}
					},
					onSubmit: function () {//提交
						console.log(this.isActive_name,this.pasNum,this.passNum)
						if(this.isActive_name && this.isActive_pas && this.isActive_pass){
							this.isUrl = true;
						}else{
							this.Onblur_name();
							this.Onblur_pas();
							this.Onblur_pass();
						}
					}
				}
			})
		</script>
	</body>
</html>
